import React, { Component } from 'react'

export default class NewCycle extends Component {
  constructor(props){
    super(props)
    this.state= {
      n: this.props.n
    }
    console.log('旧版生命周期 诞生了')
  }

  // componentWillUnmount(){  //新版删除  
  //   console.log('旧版生命周期 即将挂载 正常情况下跟构造函数一样只会运行一次')
  // }
  
  componentDidMount(){
    console.log('旧版生命周期 挂载完成 只会执行一次')
  }

  // componentWillReceiveProps(nextProps){
  //   console.log('旧版生命周期 即将接收新的数值',this.props,nextProps)
  // }
  static getDerivedStateFromProps(props, state) {
      console.log('属性,状态更新getDerivedStateFromProps',props,state)

      return null // 不改变当前状态
      // return {  // 用新的对象 替换 之前状态
      //   n: props.n 
      // }
  }

  getSnapshotBeforeUpdate(prevProps,propState){
    console.log('getSnapshotBeforeUpdate',prevProps,propState)
    return 123
  }
  shouldComponentUpdate(nextProps,nextState,span){
    console.log('旧版生命周期 组件是否应该更新 属性',this.props,nextProps)
    console.log('旧版生命周期 组件是否应该更新 状态',this.state,nextState)
    console.log(span)
    if(nextProps.n === this.props.n && this.state.n === nextState.n){
      return false
    }
    return true
  }
  // componentWillUpdate(nextProps,nextState){
  //   console.log('旧版生命周期 组件即将被重新渲染 属性',this.props,nextProps)
  //   console.log('旧版生命周期 组件即将被重新渲染 状态',this.state,nextState)
   
  // }
  componentDidUpdate(prevProps,prevState){
    console.log('旧版生命周期 组件已经被重新渲染 属性',this.props,prevProps)
    console.log('旧版生命周期 组件已经被重新渲染 状态',this.state,prevState)
  }
  componentWillUnmount(){
    console.log('组件被销毁')
  }
  render() {
    return (
      <div>
          <div>新版生命周期组件</div>
          <div>属性n:{this.props.n}</div>
          <div>状态n:{this.state.n}</div>
          <p>
                    <button onClick={() => {
                        this.setState({
                            n: this.state.n + 1
                        })
                    }}>n加1</button>
                </p>
      </div>
      
    )
  }
}
